//关于颜色的定义
$theme-color:#ff9600;
$common-color:#333333;
$gray-color:#666666;
$pure-gray:#999999;
$border-color:#efefef;
$background-color:#f5f5f5;
$white-color:#ffffff;
$money-color:#ff4f00;


//关于大小的定义
$reset:1rem;
$xs:1.2rem;
$sm:1.4rem;
$md:1.6rem;
$lg:1.8rem;

//amazeUI的样式初始化是基于Normalize.css，基于此，针对项目，以下进行初始化
/*初始化开始*/
input,textarea{
  -webkit-appearance: none;
}
::-webkit-input-placeholder{
  line-height: normal;
}
p,h1,h2,h3,h4,h5,h6{
  margin-top: $reset;
  margin-bottom: $reset;
}
a,a:hover,a:active,a:visited{
  color: #333333;
}
del{
  margin-left: 5px;
}
i{
  font-style: normal;
}
img{
  width: 100%;
}
/*初始化结束*/


//基本设置
html {
  font-size: 62.5%;
}
body{
  font-size: $sm;
  background: $background-color;
  color: $common-color;
  padding-bottom: 4rem;
}
/*mixin*/
@mixin flex{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
@mixin textTruncate($clamp:2,$line-height:1.5em){
  /*
  一般文本超过一定行数需要被截断，那么，现在有两种情况，
  1：超过，则被截断
  2：没有超过，那么不会用到截断
  这两种有什么区别呢？
  就是截断的时候，最后一行文本的的底部是“没有间隙的”，进而衍生一些问题：
  很多横向排列的浮动元素块，块元素高度都是使用正常文本流，那么一个使用到截断的块和没有使用截断的块，
  在高度有了细微的差别，即“间隙”造成的高度不同，进而影响了后面的浮动元素，因为没有截断的块会向下顶出一个“间隙”，使后面的元素排列超出了预料，
  解决办法就是使用高度定死，这个高度是随着行高变化的，设置一个默认行高，一般来说，使用截断的文本块:高度="行高*换行数"，
  此时使用em为单位，正好消除比例问题*/
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $clamp;
  -webkit-box-orient: vertical;
  line-height: $line-height;
  min-height: $clamp*$line-height;
}
@mixin clearFloat{
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}


/*公用类开始*/
.flex{
  @include flex;
}
.white-background{
  background: $white-color;
}
.border-bottom-add{
  border-bottom: 1px solid $border-color;
}
.border-top-add{
  border-top: 1px solid $border-color;
}
.border-add{
  border: 1px solid $border-color;
}
.select-class{
  background: $theme-color;
  color:$white-color;
}
.theme-color{
  color: $theme-color;
}
.gray-color{
  color:$gray-color;
}
.pure-gray{
  color:$pure-gray;
}
.common-color{
  color: $common-color;
}
.money-color{
  color:$money-color;
}
.reset-font{
  font-size: $reset;
}
.xs-font{
  font-size: $xs;
}
.sm-font{
  font-size: $sm;
}
.md-font{
  font-size: $md;
}
.lg-font{
  font-size: $lg;
}
.reset-line-height{
  line-height: 1;
}
.set-line-height{
  line-height: 1.5em;
}
.md-line-height{
  line-height: 2.5em;
}
.am-tabs-bd{
  border: none;
}
/*公用类结束*/


/*样式开始*/

//商品详情

.am-nav > li.am-active > a,
.am-nav > li.am-active > a:hover,
.am-nav > li.am-active > a:focus{
  color: $theme-color!important;
  background: #FFFFFF;
  border-bottom: 3px solid $theme-color;
}

.footer-nav{
  position: fixed;
  height: 4rem;
  bottom: 0;
  z-index: 100;
  @include flex;
  .yellow-btn,.red-btn{
    width: 100%;
    height: 4rem;
    color: $white-color;
    line-height: 2.5rem;
  }
  .yellow-btn{
    background: $theme-color;
  }
  .red-btn{
    background: $money-color;
  }
}
.norm-choose{
  span{
    background: $gray-color;
    color: $white-color;
    padding: 0.2rem 0.4rem;
    line-height: 1.5;
  }
}
/*.am-btn:link,.am-btn:visited, .am-btn:hover,.am-btn:active{
  color: $white-color;
}*/
//店铺首页关于店铺介绍的主题样式开始
.theme1{
  position: relative;
  .banner{
    img{
      width: 100%;
    }
  }
  p{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .user-avatar{
    border-radius: 50%;
    overflow: hidden;
    width: 7rem;
    height: 7rem;
    position: relative;
    margin: -3.5rem auto 0;
    img{
      width: 7rem;
      height: 7rem;
      border: 1px solid rgba(200,191,231,0.7);
    }
  }
  .shop-title{
    color:$theme-color;
    font-size: $md;
    text-align: center;
  }
  .shop-info{
    color:$pure-gray;
    text-align: center;
    font-size: $xs;
    span{
      border-right: 1px solid $border-color;
      padding-right: 1rem;
      margin-right: 1rem;
    }
  }
  .shop-intro{
    color:$gray-color;
    text-align: center;
    padding: 0 5rem 1rem;
    margin: 0;
    line-height: 1.8em;
    min-height: 1.8*2em;
  }

}
.theme2{
  position: relative;
  .banner{
    img{
      width: 100%;
    }
  }
  .user-avatar{
    border-radius: 2px;
    overflow: hidden;
    width: 7rem;
    height: 7rem;
    position: relative;
    margin: -2rem 0 0 2rem;
    display: inline-block;
    img{
      width: 7rem;
      height: 7rem;
      border: 1px solid rgba(200,191,231,0.7);
    }
  }
  .shop-title{
    color:$common-color;
    font-size: $lg;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    margin: 0.5rem 0 0.5rem 1rem;
    font-weight: bold;
  }
  .shop-info{
    color:$gray-color;
    text-align: left;
    display: inline-block;
    margin: 3rem 0 0.5rem 1rem;
    position: absolute;
    left: 9rem;
    font-size: $xs;
    span{
      border-right: 1px solid $border-color;
      padding-right: 1rem;
      margin-right: 1rem;
    }
  }
  .shop-intro{
    color:$gray-color;
    text-align: left;
    padding:0 2rem 1rem 2rem;
    margin: 0;
    line-height: 1.8em;
    min-height: 1.8*2em;
  }
}

//产品展示样式开始

.add-cart{
  width: 2rem;
  height: 2rem;
  position: absolute;
  background: url("../images/gobuy.png") no-repeat;
  background-size: 2rem;
}
ul.am-nav.am-tabs-nav.shop-nav-style{
  overflow-x: auto;
  white-space: nowrap;
  height: 3em;
  border-top: 1px solid #efefef;
  li,li.active{
    display: inline-block;
    width: 25%;
    margin-top: 0;
  }
}
.pro-type{
  .pro-list-unsort-content{
    display: none;
  }
  .pro-block-sort-content{
    display: none;
  }
  .pro-list-sort-content{
    display: none;
  }
  .pro-block-unsort-content{
    display: none;
  }
  &:nth-child(1){
    *{
    display: block;
  }

  }

}
.proBlock{
  .pro-block-sort-content{
    position: relative;
    img{
      border: 1px solid $border-color;
    }
    p{
      margin: 0.5rem 0 0 0 ;
      @include textTruncate($clamp:2,$line-height:1.8em);
    }
    .add-cart{
      bottom:0.5rem;
      right: 1rem;
    }
    &:last-child{
      float: left;
    }
  }
}


.proList{
  .pro-list-sort-content{
    position: relative;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-bottom: 1px solid $border-color;
    img{
      border: 1px solid $border-color;
      max-width: 10rem;
      max-height: 10rem;
    }
    p{
      margin-top: 0;
      margin-bottom: 2em;
      @include textTruncate($clamp:2,$line-height:1.8em);
    }
    span{
      line-height: 1;
      //padding-top: 0.5rem;
    }
    .add-cart{
      bottom: 0.5rem;
      right: 1rem;
    }
  }
}

.proLargeImg{
  .pro-list-unsort-content{
    position: relative;
    img{
      min-height: 16rem;
      border: 1px solid $border-color;
    }
    .add-cart{
      right: 1rem;
      bottom: 0.5rem;
    }
  }
}

.proMultiImg{
  .pro-block-unsort-content{
    position: relative;
    border-bottom: 1px solid $border-color;
    img{
      border: 1px solid $border-color;
    }
    .add-cart{
      right: 1rem;
      bottom: 0.5rem;
    }
  }
}


#cart{
  position: absolute;
  width: 5rem;
  height: 5rem;
  background: url("../images/cartfloat.png") no-repeat;
  background-size: 5rem;
  z-index: 111;
  right: 2rem;
  top: 60rem;
}
.cart-true{
  &:after{
    content: "";
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background: $money-color;
    border: 2px solid $border-color;
    border-radius: 50%;
    left: 4rem;
    top: 1rem;
  }
}

//加减
$handle-data: (plus, 0, 0),(cut, -1rem, 0);
@each $name, $offset-x,$offset-y in $handle-data {
  .#{$name}-icon {
    width: 1rem;
    height: 1rem;
    background: url('../images/pc.png') $offset-x $offset-y  no-repeat;
    background-size:2rem 1rem ;
  }
}
//黑色导航样式
#header-nav{
  background:rgba(0,0,0,0.35) ;
  height: 3rem;
  color: #ffffff;
  position: absolute;
  z-index: 2;
  .am-u-sm-1,.am-u-sm-2,.am-u-sm-5{
    height: 3rem;
    line-height: 3rem;
  }
  img{
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(200,191,231,0.7);
  }
  a{
   color: $white-color;
}
}

.cart-shop-pro{
  height: 10rem;
  position: relative;
  @include flex;
  img{
    border: 1px solid $border-color;
    width: 8rem;
    height: 8rem;
    margin-left: 0.5rem;
    margin-right: 1rem;
  }
  div.cart-list {
    width: 60%;
    p.pro-title{
      @include textTruncate(2,1.5em);
    }
  }
  .order-list{
    width: auto!important;
    padding-right:1rem;
    padding-left:1rem;
    p.pro-title{
      @include textTruncate(2,1.5em);
    }
    max-width: 65%;
    min-width: 63%;
  }
}
.cart-pro-handle{
  a.am-btn{
    border: 1px solid #cccccc;
  }
}

//购物车结算fixed样式
.cart-fixed{
  position: fixed;
  bottom: 0;
  height: 4rem;
  box-shadow: 0 -1px 2px 1px $border-color;
  z-index: 100;
  a{
    background: $money-color;
    color: #ffffff;
    width: 100%;
    height: 4rem;
    line-height: 2.5rem;
  }
}

//半透明图层
.mask{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 100;
  display: none;
}

//立即购买和加入购物车弹窗
.pop-box{
  position: fixed;
  bottom: 0;
  max-height: 28rem;
  overflow-y: auto;
  z-index: 101;
  display: none;
  img{
    border: 1px solid $border-color;
  }
  button{
    height: 4rem;
    color: #ffffff;
  }
  button.directBuy{
    background: $money-color;
  }
   .num-select{
    height: 6rem;
    @include flex;
     @at-root .num-box{
      height: 2.4rem;
      width: 12rem;
      border:1px solid $pure-gray;
      border-radius: 5px;
      overflow: hidden;
      background: $border-color;
      span{
        width: 3.8rem;
        height: 2.4rem;
      }
      input{
        width: 4rem;
        height: 2.4rem;
        border: none ;
        font-size: $xs;
        border-left: 1px solid $pure-gray;
        border-right: 1px solid $pure-gray;
      }
    }
  }
}


//物流信息页面样式
.express-circle{
  position: relative;
  z-index: 2;
  &:after{
    content: "";
    display: inline-block;
    width: 1px;
    height: 10rem;
    position: absolute;
    left: 50%;
    background: $border-color;
  }
}
.express-false{
  overflow: hidden;
  .express-circle{
    width: 1rem;
    height: 1rem;
    background: $theme-color;
    &:after{
      top:1rem;
    }
  }
  p{
    color: $theme-color;
  }
}
.express-true{
  overflow: hidden;
  .express-circle{
    width: 0.8rem;
    height: 0.8rem;
    background: $pure-gray;
    &:after{
      top:0.8rem;
    }
    &:before{
      content: "";
      display: inline-block;
      width: 1px;
      height: 1rem;
      position: absolute;
      left: 50%;
      background: $border-color;
      top:-1rem;
    }
  }
}

//订单详情页面
.address-box{
  background: url("../images/addressBg.png") repeat-x;
  background-size: auto 100%;
}

//icon
$icon:(order,0,0),(express,-1.6rem,0),(address,-3.2rem,0),(shop,-4.8rem,0),
        (share,-6.4rem,0),(cart,-8rem,0),(sort,-9.6rem,0),(un-sort,-11.2rem,0),
        (home,-12.8rem,0),(un-home,-14.4rem,0),(more,-16rem,0),(search,-17.6rem,0),
        (like,-19.2rem,0),(list,-20.8rem,0),(edit,-22.4rem,0),(add,-24rem,0),
        (check,-25.6rem,0),(uncheck,-27.2rem,0),(close,-28.8rem,0);
@each $name,$offset-x,$offset-y in $icon{
  .#{$name}-icon{
    width: 1.6rem;
    height: 1.6rem;
    background: url('../images/icons.png') $offset-x $offset-y  no-repeat;
    background-size:30.4rem 1.6rem;
    vertical-align: middle;
  }
}
.order-footer{
  position: fixed;
  bottom: 0;
}

//确认订单页面地址管理
.add-new-icon{
  width: 3.2rem;
  height: 3.2rem;
  background: url("../images/addadd.png") no-repeat;
  background-size: 3.2rem;
  vertical-align: middle;
}

.address-manage{
  position: fixed;
  display: none;
  overflow-y: auto;
  bottom: 0;
  z-index: 101 ;
  max-height: 30rem;
  .am-u-sm-3{
    span{
      display: inline-block;
      vertical-align: middle;
    }
  }
  button{
    width: 60%;
  }
  button.delete-address{
    //display: none;
    border: 1px solid $gray-color;
  }
  input{
    line-height: normal;
  }
  .am-g{
    display: flex;
    align-items: center;
  }
  .am-g:nth-child(1),.am-g:nth-last-child(1){
    display: block;
  }
}
input.am-form-field{
  border:none;
  &:focus{
    border:none;
    outline: none;
    box-shadow: none;
} ;
}

//地址选择list
.address-list{
  width: 50%;
  height: 22rem;
  overflow-y: auto;
  background: $white-color;
  position: absolute;
  z-index: 110;
}


//选择支付方式页面
$agent-data:(wechat,0,0),(wechat-un,-4.5rem,0),(alipay,-9rem,0),(alipay-un,-13.5rem,0);
@each $name,$offset-x,$offset-y in $agent-data{
  .pay-agent-#{$name}{
    width: 4.5rem;
    height: 4.5rem;
    background: url("../images/payment.png") no-repeat $offset-x $offset-y;
    background-size: 18rem 4.5rem;
  }
}
.go-pay{
  width: 60%;
}

//收藏和分享时弹出的背景
.share-store{
  background: url("../images/bg.png") no-repeat  center  top;
  background-size: 100% auto;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index:115;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
}

//搜索页
.search-input,.search-input:focus{
  background: $background-color;
}
.search-btn{
  &:focus{
    outline: none;
    color: $theme-color;
    -webkit-tap-highlight-color: transparent;
    border: none;
  }
  &:active{
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  &:visited{
    color: $theme-color;
  }
}

//登录
$login-icon:(phone,0,0),(code,-1.5rem,0),(password,-3rem,0);
@each $name,$offset-x,$offset-y in $login-icon{
  .#{$name}-icon{
    width: 1.5rem;
    height: 1.5rem;
    background: url("../images/login.png") no-repeat $offset-x $offset-y;
    background-size: 4.5rem 1.5rem;
    vertical-align: middle;
  }
}
.form-group {
  text-align: left;
  padding: 0.5rem;
  position: relative;
  input{
   display: inline-block!important;
    width: auto;
  }
  button{
    width: 65%;
    //box-shadow: 0px 0px 1px 1px $theme-color;
  }
  .getCode{
    position: absolute;
    right: 1rem;
    top: 0.7rem;
  }
}

//弹窗父级样式
.pop-window {
  position: absolute;
  width: 80%;
  background-color: #ffffff;
  z-index: 120;
  display: none;
  box-sizing: border-box;
  border-radius: 5px;
}
a.foo-nav,a.foo-nav:visited{
  color: #3b8fd8;
}
.float-right-special{
  margin-top: 0.4rem;
}

//空白缺省页
.emptyMsg{
  padding-top: 12rem;
  padding-bottom: 2rem;
}
$default-data:(Cart),(Order),(Search),(Error),(Product),(Login),(Store),(Pro);
@each $name in $default-data{
  .empty-#{$name}{
    width: 100%;
    height: 20rem;
    background: url("../images/empty#{$name}.png") no-repeat;
    background-size: 100% 20rem;
  }
}

//搜索
.search-tag{
  .search-word{
    float: left;
    max-width: 30%;
    padding: 0.2rem 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.search-clear{
  position: fixed;
  bottom: 0;
  line-height: 2em;
}

//分享样式
.share-container{
  width: 86%;
  .swiper-container{
    box-shadow: 0px 0px 2px 2px $border-color;
  }
  .share-box{
    width:100%;
    position: relative;
    z-index: 10;
  }
}

//关于轮播的active设置
.swiper-pagination-bullet-active{
  background: $theme-color!important;
}
// 关于按钮设置,按钮在点击后，文字会变成#333,这个类是单独为了这样的按钮所加的效果
.py-btn,.py-btn:link,.py-btn:visited,.py-btn:hover,.py-btn:active{
  color: $white-color;
}

//amazeUI 的  .am-form-field 类中，.am-input-sm 的行高为1.2,导致了非常多的对不齐，在此回归为1.5
.am-form-field{
  line-height: normal!important;
}

//loading
.loading{
  visibility: hidden;
}

/*样式结束*/













/*media query ,针对不容大小的设备*/
//5s
@media screen and (max-width: 320px) {
  html {
    font-size: 50%;
  }
  body{
    font-size: 1.4rem;
  }
}

//iphone 6plus

@media screen and (max-width: 640px) and (min-width:414px) {
  html {
    font-size:65%;
  }
  body{
    font-size: 1.4rem;
  }
  .pro-list-sort-content{
  }
}

//ipad
@media screen and (min-width: 640px){
  html {
    font-size: 100%;
  }
  body{
    font-size: 1.4rem;
  }
}